<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import ChannelSelect from '@/views/article/components/ChannelSelect.vue'
import { artGetListService } from '@/api/article.js'
import { formatTime } from '@/utils/format.js'

const loading = ref(false) //loading状态
// 请求参数对象
const params = ref({
  pagenum: 1,
  pagesize: 10,
  cate_id: '', // 分类 id
  state: '', // 状态 已发布、草稿
})
const totalNum = ref(0) // 文章总条数
const articleList = ref([]) // 文章列表
// 基于  params 对象获取文章列表
const getArticleList = async () => {
  loading.value = true
  const res = await artGetListService(params.value)
  articleList.value = res.data.data
  totalNum.value = res.data.total
  loading.value = false
}
getArticleList()

// 文章列表测试数据
// const articleList = ref( [
//   {
//     "Id": 5961,
//     "title": "新的文章啊",
//     "pub_date": "2022-07-10 14:53:52.604",
//     "state": "已发布",
//     "cate_name": "体育"
//   },
//   {
//     "Id": 5962,
//     "title": "新的文章啊",
//     "pub_date": "2022-07-10 14:54:30.904",
//     "state": '草稿',
//     "cate_name": "体育"
//   }
// ])
// 选择器分类id
const cateId = ref()

// 更新请求的参数对象

const onEditArticle = (row) => {
  console.log(row)
}
const onDelArticle = (row) => {
  console.log(row)
}

//分页逻辑
const onSizeChange = () => {
  params.value.pagenum = 1 // 跳到第一页 重置页面
  getArticleList()
}
const onCurrentChange = () => {
  getArticleList()
}
// 条件搜索
const onSearch=()=>{
  params.value.pagenum = 1
  getArticleList()
}
// 重置筛选条件
const onReset=()=>{
  params.value.pagenum = 1
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}


</script>

<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary">添加文章</el-button>
    </template>
    <!--第一栏操作栏-->
    <el-form inline>
      <el-form-item label="文章分类：">
        <!--label="" value="" label展示描述  value实际提交数据-->
        <ChannelSelect v-model="params.cate_id"></ChannelSelect>
      </el-form-item>
      <el-form-item label="发布状态：">
        <el-select class="select" v-model="params.state">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!--表格内容-->
    <el-table :data="articleList" v-loading="loading" size="large">
      <el-table-column prop="title" label="文章标题" min-width="120">
        <template #default="{row}">
          <el-link type="primary" :underline=false>{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类" min-width="100"></el-table-column>
      <!--下方prop="pub_date"会被忽略，因为默认给了插槽，进行时间格式化-->
      <el-table-column prop="pub_date" label="发表时间" min-width="250">
        <template #default="{row}">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" min-width="100"></el-table-column>
      <el-table-column label="操作" min-width="250">
        <template #default="{row}">
          <el-button :icon="Edit" type="primary" plain size="small" @click="onEditArticle(row)">编辑</el-button>
          <el-button :icon="Delete" type="danger" plain size="small" @click="onDelArticle(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--底部分页栏-->
    <div class="end-row">
      <el-pagination class="pagination"
                     v-model:current-page="params.pagenum"
                     v-model:page-size="params.pagesize"
                     :page-sizes="[5,10,15,20]"
                     :background="true"
                     layout="jumper, total, sizes, prev, pager, next"
                     :total="totalNum"
                     @update:current-page="onCurrentChange"
                     @update:page-size="onSizeChange"
      />
    </div>
  </page-container>

</template>

<style lang="scss" scoped>
.select {
  min-width: 150px;
}

//分页器
.end-row {
  margin-top: 20px;
  overflow-x: auto;

  .pagination {
    &::before {
      content: '';
      flex: 1;
      //解决向右对齐
    }
  }
}

</style>